/*
 * @Author: ZhaoZhiqi
 * @Date: 2023-11-07 11:50:07
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-01-13 10:29:18
 * @Description: SearchInput
 * @FilePath: \labtalk-admin\src\components\Search\SearchInput\index.jsx
 */
import { Input, CloseButton } from '@mantine/core';

export function SearchInput({ value, onChange, onClose, onEnter, placeholder }) {
    return (
        <Input
            placeholder={placeholder}
            value={value}
            onChange={(event) => onChange(event.currentTarget.value)}
            rightSectionPointerEvents="all"
            rightSection={
                <CloseButton
                    onClick={onClose}
                    style={{ display: value ? undefined : 'none' }}
                />
            }
            onKeyDown={(event) => {
                if (event.key === 'Enter') {
                    onEnter();
                }
            }}></Input>
    )
}